<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Xenon Boostrap Admin Panel" />
	<meta name="author" content="" />
	
	<title>Xenon - Extra</title>

	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/fonts/linecons/css/linecons.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/fonts/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/bootstrap.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/xenon-core.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/xenon-forms.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/xenon-components.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/xenon-skins.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>css/utility.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/custom.css">

	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/css/custom.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/fancybox/jquery.fancybox.css">
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/fancybox/helpers/jquery.fancybox-buttons.css">

	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/jquery-1.11.1.min.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/fancybox/jquery.fancybox.pack.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/fancybox/helpers/jquery.fancybox-buttons.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/fancybox/helpers/jquery.fancybox-media.js"></script>
	
	<script src="<?php echo admin_theme_url();?>vendor/notify/notify.min.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/notify/styles/bootstrap/notify-bootstrap.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	<style type="text/css" media="screen">
		.modal-gallery-image img {
		  display: inline-block;
		  width: auto;
		  max-height: 300px;
		}
	</style>	
	
</head>
<body class="page-body">
	<div class="page-container">
		<div class="main-content">
			<script type="text/javascript">
			var edit_id = "<?php echo @$edit_id; ?>",
				post_url = "<?php echo $this->url_index ?>/popup_post_images/" + edit_id;
			// Sample Javascript code for this page
			jQuery(document).ready(function($)
			{

				// Sample Select all images
				$("#select-all").on('change', function(ev)
				{
					var is_checked = $(this).is(':checked');
					
					$(".album-image input[type='checkbox']").prop('checked', is_checked).trigger('change');
				});
				
				// Edit Modal
				$('.gallery-env a[data-action="edit"]').on('click', function(ev)
				{
					ev.preventDefault();
					//$("#gallery-image-modal").modal('show');
				});
				
				// Delete Modal
				$('.gallery-env a[data-action="trash"]').on('click', function(ev)
				{
					ev.preventDefault();
					//$("#gallery-image-delete-modal").modal('show');
				});

				// Save Modal
				$('[data-action=save]').on('click', function(ev)
				{
					ev.preventDefault();
					var image_id = $(this).data('id'),
						caption = $('#modal-data-caption').val();

					$.post(post_url, { action: "update", image_id: image_id, caption: caption }, function(){

						$("#gallery-image-modal").modal("hide");
						$.notify("Cập nhật thành công!", 'success');
					});
				});
				
				
				// Sortable
				
				$('.gallery-env a[data-action="sort"]').on('click', function(ev)
				{
					ev.preventDefault();
					var is_sortable = $(".album-images").sortable('instance');
					
					if( ! is_sortable)
					{
						$(".gallery-env .album-images").sortable({
							items: '> div'
						});
						
						$(".album-sorting-info").stop().slideDown(300);
					}
					else
					{
						$(".album-images").sortable('destroy');
						$(".album-sorting-info").stop().slideUp(300);
						var order = [];
						$.each($(".album-images > div"), function(i, item){
							order.push($(item).data('item'));
						});

						//update post content
						$.post(post_url, { action: "sortable", data: order }, function(res){
							console.log($.parseJSON(res));
						});
					}
				});

				$("#gallery-image-delete-modal").on('shown.bs.modal', function(e){

					var button = $(e.relatedTarget),
						$this = $(this),
						ids = [],
						type = button.data('type'),
						button = button.closest('.album-image'),
						id = button.find('span.data-id').text(),
						img = button.find('span.data-img').text(),
						caption = button.find('span.data-caption').text();

					if(type == "single") {
						ids.push(id);
						$this.find('[data-action=delete]').data('id', id);
					} else {
						$('input[name^="imglist"]').each(function() {
							ids.push($(this).val());
						})
					}
					$this.find('[data-action=delete]').data('type', type);

				});

				$('[data-action=delete]').on('click', function() {
					var $this = $(this),
					type = $this.data('type'),
					ids = [];

					if(type == "single") {
						ids.push($this.data('id'));
					}
					else {
						$('input[name^="imglist"]:checked').each(function() {
							ids.push($(this).val());
						})
					}
						
					// remove image item
					$.each(ids, function(i, v){
						$("[data-item="+v+"]").remove();
					});

					//update post content
					$.post(post_url, { action: "delete", data: ids }, function(res){
						res = $.parseJSON(res); 
						console.log(res);
					});

					console.log(ids);
					$("#gallery-image-delete-modal").modal('hide');

				});

				$("#gallery-image-modal").on('show.bs.modal', function(e){

					var button = $(e.relatedTarget),
						$this = $(this),
						button = button.closest('.album-image'),
						id = button.find('span.data-id').text();

					$.post(post_url, { action: "select", image_id: id }, function(res){
						res = $.parseJSON(res); 

						$this.find('img.data-img').attr('src', res.fullPath);
						$this.find('.data-caption').text(res.caption);
						$this.find('[data-action=save]').data('id', id);
					});
				});

				$(".parent-fancybox").fancybox({
					fitToView	: false,
					width		: '70%',
					height		: '80%',
					autoSize	: false,
					closeClick	: false,
					centerOnScroll: true,
					openEffect	: 'none',
					closeEffect	: 'none',
					afterClose  : function() {
			        },
			        afterShow: function () {
			        },
			        beforeLoad : function() {         
			            this.width  = this.element.data('fancybox-width');
			            this.height = this.element.data('fancybox-height');
			            if(this.width === undefined){
			            	this.width = '70%';
			            	this.maxWidth = 860;
			            }
			            if(this.height === undefined){
			            	this.height = '80%';
			            	this.maxHeight = 680;
			            }
			        }
			    });
			});

			//
			// Handles message from ResponsiveFilemanager
			//
			function OnMessage(e){
				var event = e.originalEvent;
				// Make sure the sender of the event is trusted
				if(event.data.sender === 'responsivefilemanager'){
					if(event.data.field_id){
						var fieldID=event.data.field_id;
						var url=event.data.url;
						//console.log(url);
						$('#'+fieldID).val(url).trigger('change');
						$.fancybox.close();
						// Delete handler of the message from ResponsiveFilemanager
						$(window).off('message', OnMessage);
					}
				}
			}

			// Handler for a message from ResponsiveFilemanager
			$('.parent-fancybox').on('click',function(){
				$(window).on('message', OnMessage);
			});
			
			function responsive_filemanager_callback(field_id){
				//console.log(field_id);
				var url=jQuery('#'+field_id).val();
				//console.log(url);
				$.post(post_url, { action: "insert", url: url }, function(res){
					$('.album-images').append(res)
				});
			}
			</script>
			
			<section class="gallery-env">
			
				<div class="row">					
					<!-- Gallery Album Optipns and Images -->
					<div class="col-sm-12">
						
						<!-- Album Header -->
						<div class="album-header">
							<h2>General</h2>
							
							<ul class="album-options list-unstyled list-inline">
								<li>
									<input type="checkbox" class="cbr" id="select-all" />
									<label for="select-all">Select all</label>
								</li>
								<li>
								<input id="fieldID2" type="hidden" value="" >
									<a href="<?php echo base_url();?>media/filemanager/dialog.php?type=2&field_id=fieldID2" class="parent-fancybox fancybox.iframe" type="button">
										<i class="fa-upload"></i>
										Add Images
									</a>
								</li>
								<li>
									<a href="#" data-action="sort">
										<i class="fa-arrows"></i>
										Re-order
									</a>
								</li>
								<li>
									<a href="#" data-toggle="modal"  data-target="#gallery-image-delete-modal" data-action="trash" data-type=
										"multi">
										<i class="fa-trash"></i>
										Trash
									</a>
								</li>
							</ul>
						</div>
						
						<!-- Sorting Information -->
						<div class="album-sorting-info">
							<div class="album-sorting-info-inner clearfix">
								<a href="#" class="btn btn-secondary btn-xs btn-single btn-icon btn-icon-standalone pull-right" data-action="sort">
									<i class="fa-save"></i>
									<span>Save Current Order</span>
								</a>
								
								<i class="fa-arrows-alt"></i>
								Drag images to sort them
							</div>
						</div>
						
						<!-- Album Images -->
						<div class="album-images row">
							<?php foreach($listImg as $item): ?>
							<?php echo $this->load->view('admin/posts/partial_image', array('item' => $item), TRUE) ?>
							<?php endforeach; ?>
						</div>
						
					</div>
				
				</div>
				
			</section>
		</div>			
	</div>

	<!-- Gallery Modal Image -->
	<div class="modal fade" id="gallery-image-modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="row">
					<div class="col-md-12">
						<div class="modal-gallery-image img-container text-center">
							<img src="<?php echo admin_theme_url();?>vendor/popup-gallery/images/album-image-full.jpg" class="data-img img-responsive" />
						</div>
					</div>
				</div>
				
				<div class="modal-body">
					
					<div class="row">
						<div class="col-md-12">
							
							<div class="form-group">
								<label for="field-1" class=" control-label">Caption</label>
								
								<textarea class="form-control autogrow data-caption" id="modal-data-caption" placeholder="Enter image description" style="min-height: 80px;"></textarea>
							</div>	
							
						</div>
					</div>
					
				</div>
				
				<div class="modal-footer modal-gallery-top-controls">
					<button type="button" class="btn btn-xs btn-white" data-dismiss="modal">Close</button>
					<button data-id="0" data-action="save" type="button" class="btn btn-xs btn-secondary">Save</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	<!-- Gallery Delete Image (Confirm)-->
	<div class="modal fade" id="gallery-image-delete-modal" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				
				<div class="modal-header">
					<h4 class="modal-title">Confirm Image Deletion</h4>
				</div>
				
				<div class="modal-body">
				
					Do you really want to delete this image?
					
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
					<button data-id="0" data-action="delete" data-type="single" type="button" class="btn btn-danger">Delete</button>
				</div>
			</div>
		</div>
	</div>


	<!-- Imported styles on this page -->
	<link rel="stylesheet" href="<?php echo admin_theme_url();?>vendor/popup-gallery/js/cropper/cropper.min.css">

	<!-- Bottom Scripts -->
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/bootstrap.min.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/TweenMax.min.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/resizeable.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/joinable.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/xenon-api.js"></script>
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/xenon-toggles.js"></script>


	<!-- Imported scripts on this page -->
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/jquery-ui/jquery-ui.min.js"></script>


	<!-- Imported scripts on this page -->
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/cropper/cropper.min.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="<?php echo admin_theme_url();?>vendor/popup-gallery/js/xenon-custom.js"></script>

</body>